<template>
	<view>
		<view class="bg-white text-1 tip p-3" v-if='showTip==2||showTip==3'>
			亲,为您找到
			<span class="text-4 h5 font-weight-600 ml-1 mr-1">{{list?.length ||0}}</span>
			题答案
		</view>

		<view class='flex flex-center top-box flex-column'>
			<image mode='widthFix' :src="WEBCONFIG.search_image" v-if='showTip==0'> </image>
			<view class="p-4 w-100" v-if="showTip==2">
				<view class="p-6 bg-white rounded-5 mb-5 box-shadow" v-for='(item,index) in list' :key="index">
					<view class="flex flex-row flex-x-space-between mb-5">
						<view class="h7 font-weight-800 text-2">【{{item.type}}】</view>
						<uni-rate :value="5" color="#bbb" active-color="red" />
					</view>
					<view class="line-1 mb-5"></view>
					<view class="text-3 text-blod mb-5">{{item.title}}</view>
					<view class="analysis p-4 rounded-5">
						<view class=" mb-1  flex flex-y-center" v-if='item.answer.includes("A")'>
							<uni-icons type="checkbox-filled" color="#39b350" size="20"></uni-icons>
							<view class="text-4 text-blod"> {{item.option_a}}</view>
						</view>
						<view class=" mb-1 flex flex-y-center" v-if='item.answer.includes("B")'>
							<uni-icons type="checkbox-filled" color="#39b350" size="20"></uni-icons>
							<view class="text-4 text-blod"> {{item.option_b}}</view>
						</view>
						<view class=" mb-1 flex flex-y-center" v-if='item.answer.includes("C")'>
							<uni-icons type="checkbox-filled" color="#39b350" size="20"></uni-icons>
							<view class="text-4 text-blod"> {{item.option_c}}</view>
						</view>
						<view class="flex mt-6 flex-y-center" v-if='item.answer.includes("D")'>
							<uni-icons type="checkbox-filled" color="#39b350" size="20"></uni-icons>
							<view class="text-4 text-blod"> {{item.option_d}}</view>
						</view>


						<image :src="item.imageurl" v-if='item.imageurl!=""' class="w-100" mode='widthFix'></image>
					</view>
				</view>

			</view>
			<image mode='widthFix' :src="WEBCONFIG.empty" class="vh-30" v-if='showTip==3'> </image>

			<view v-if='showTip==2||showTip==3' class="error rounded-3 p-2 text-white" @click="feedback">错题反馈</view>
		</view>
		<view class="bottom-box flex flex-row  py-5 bg-white flex-y-center">
			<view class="flex-1">
				<view class="flex flex-row flex-center" @click="saveAlbum('album')">
					<image class="img" src="../../static/icon/ic_so_img.png"></image>
					<view class="ml-3">
						<view class="h7">相册选图</view>
						<view class="text-1 h9">一人手机截屏</view>
					</view>
				</view>
			</view>
			<view class='line'></view>
			<view class="flex-1">
				<view class="flex flex-row flex-center" @click="saveAlbum('camera')">
					<image class="img" src="../../static/icon/ic_so_shot.png"></image>
					<view class="ml-3">
						<view class="h7">拍照搜题</view>
						<view class="text-1 h9">朋友配合拍照</view>
					</view>
				</view>
			</view>

		</view>
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
		<x-tabbar page="/pages/search/index"></x-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { $http } from '../../utils';
	import { useWebConfigStore, useRefs } from "@/stores";
	import { onLoad, onShow } from '@dcloudio/uni-app'
	const list = ref()
	const showTip = ref(0)
	const show = ref(true)
	const id = ref(0)
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const status = ref(false)
	onLoad(() => {
		uni.hideTabBar();
	})
	onShow(() => {
		getStatus()
	})
	const getStatus = () => {
		$http.get('Search/determineSS').then(res => {
			status.value = res.data
		})
	}
	const saveAlbum = (v : any) => {
		if (status.value == false) {
			uni.showToast({
				title: '搜题次数不足',
				icon: 'none'
			});
			return;
		}
		uni.chooseImage({
			sourceType: [v],
			count: 1,
			success(res) {
				uni.showLoading({
					title: '加载中...'
				})
				$http.upload('Search/Search', { name: 'file', filePath: res.tempFilePaths[0] }).then((res : any) => {
					showTip.value = res.data ? 2 : 3;
					list.value = res.data.list;
					id.value = res.data.id;
					getStatus()
				}).catch((err : any) => {
					uni.hideLoading();
				});
			}, fail(err) {
				// #ifdef MP-TOUTIAO
				if (err.errNo == 10200) {
					uni.showModal({
						content: `检测到您没打开${v === 'camera' ? '相机' : '相册'}权限，是否去设置打开？`,
						confirmText: "确认",
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting();
							} else {
								uni.showToast({
									title: '取消授权',
									icon: 'none'
								});
							}
						}
					});
				}
				// #endif
			}
		})
	};


	//错误反馈
	const feedback = (() => {
		$http.get('Record/feedback', { data: { id: id.value } }).then(res => {
			uni.showToast({
				title: '反馈成功',
				icon: 'none'
			})
			show.value = false
		})
	})
</script>

<style>
	.top-box {
		padding-bottom: calc(env(safe-area-inset-bottom) + 160px);
	}

	.bottom-box {
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 56px);
		width: 100%;
		box-shadow: 0 -4px 10px #8f8f8f;
	}

	.img {
		width: 100rpx;
		height: 100rpx;
	}

	.line {
		height: 60rpx;
		width: 1px;
		background-color: #000000;
	}

	.text-1 {
		color: #535353;
	}

	.text-2 {
		color: #e54d3c;
	}

	.text-3 {
		color: #0476eb;
	}

	.text-4 {
		color: #39b350;
	}

	.text-blod {
		font-size: 28rpx;
		font-weight: 900;
		line-height: 20px;
	}

	.line-1 {
		height: 1px;
		background-color: #e2e2e2;
		width: 100%;
	}

	.analysis {
		background-color: #f0f0f0;
	}

	.tip {
		text-align: center;
		border-top: 1px solid #e5e5e5;
	}

	.error {
		width: 180rpx;
		text-align: center;
		background-color: #ffaa00;
		margin: 0 auto;
	}
</style>